<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="item.text" :name="item.id" v-for="(item,index) in itemdata" :key="index">
        <div v-if="item.id==1">
          <div style="float:right;margin-right:20px">
            <el-button type="primary" icon="el-icon-s-data" @click="dataanalysis"></el-button>
            <el-button type="primary" icon="el-icon-search" @click="appointmentseach"></el-button>
            <el-button type="primary" icon="el-icon-document" @click="handleseach"></el-button>
          </div>
          <div class="section10 flex-col">
            <div class="mod2 flex-row">
              <span
                v-for="(item,index) in options"
                :class="current==index?'optionitems':'optionitem'"
                @click="chaged(index)"
                :key="index"
              >{{item.text}}</span>
            </div>
          </div>
          <div v-if="current==0">
            <el-table
              border
              :data="tableData"
              style="width: 100%"
              :default-sort="{prop: 'date', order: 'descending'}"
            >
              <el-table-column prop="date" label="日期" sortable></el-table-column>
              <el-table-column prop="shop" label="门店"></el-table-column>
              <el-table-column prop="seat" label="座位" sortable></el-table-column>
              <el-table-column prop="time" label="时间"></el-table-column>
              <el-table-column prop="status" label="订单状态">
                <template slot-scope="scope" style="display:flex;align-items: center;">
                  <img
                    src="../../../src/assets/img/dui.png"
                    v-if="scope.row.status"
                    style="width:14px;height:14px;margin-right:6px;"
                    alt
                  />
                  <span v-if="scope.row.status">已结束</span>
                </template>
              </el-table-column>
              <el-table-column prop="user" label="用户"></el-table-column>
              <el-table-column label="操作" width="400px">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="beforestop(scope.$index, tableData)"
                    type="text"
                  >提前结束</el-button>
                  <el-button
                    @click.native.prevent="extendedorder(scope.$index, tableData)"
                    type="text"
                  >延长订单</el-button>
                  <el-button
                    @click.native.prevent="bindstall(scope.$index, tableData)"
                    type="text"
                  >取消订单</el-button>
                  <el-button @click.native.prevent="logon(scope.$index, tableData)" type="text">签退</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-if="current==1">
            <el-table
              border
              :data="tableData2"
              style="width: 100%"
              :default-sort="{prop: 'date', order: 'descending'}"
            >
              <el-table-column prop="date" label="日期" sortable></el-table-column>
              <el-table-column prop="shop" label="门店"></el-table-column>
              <el-table-column prop="roomname" label="房间名称"></el-table-column>
              <el-table-column prop="lockseat" label="锁定座位"></el-table-column>
              <el-table-column prop="time" label="时间"></el-table-column>
              <el-table-column prop="status" label="订单状态">
                <template slot-scope="scope" style="display:flex;align-items: center;">
                  <img
                    src="../../../src/assets/img/dui.png"
                    v-if="scope.row.status"
                    style="width:14px;height:14px;margin-right:6px;"
                    alt
                  />
                  <span v-if="scope.row.status">已结束</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="400px">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="bindstall(scope.$index, tableData2)"
                    type="text"
                  >提前结束</el-button>
                  <el-button
                    @click.native.prevent="extendedorder(scope.$index, tableData2)"
                    type="text"
                  >延长订单</el-button>
                  <el-button
                    @click.native.prevent="bindstall(scope.$index, tableData2)"
                    type="text"
                  >取消订单</el-button>
                  <el-button
                    @click.native.prevent="bindstall(scope.$index, tableData2)"
                    type="text"
                  >签退</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="user" label="与会人员"></el-table-column>
            </el-table>
          </div>
        </div>
        <div v-if="item.id==2">
          <div style="float:right;margin-right:20px">
            <el-button type="primary" icon="el-icon-search" @click="controlhandleseach"></el-button>
          </div>
          <el-table border :data="doortableData" style="width: 100%">
            <el-table-column prop="time" label="时间"></el-table-column>
            <el-table-column prop="seat" label="座位"></el-table-column>
            <el-table-column prop="user" label="用户"></el-table-column>
            <el-table-column prop="opendoor" label="开锁结果"></el-table-column>
            <el-table-column prop="phone" label="用户手机号"></el-table-column>
          </el-table>
        </div>
        <div v-if="item.id==3">
          <div style="float:right;margin-right:20px">
            <el-button type="primary" icon="el-icon-search" @click="operationsearch"></el-button>
          </div>
          <el-table border :data="operationtableData" style="width: 100%">
            <el-table-column prop="time" label="时间"></el-table-column>
            <el-table-column prop="user" label="用户"></el-table-column>
            <el-table-column prop="state" label="操作"></el-table-column>
            <el-table-column prop="ipaddress" label="IP地址"></el-table-column>
          </el-table>
        </div>
        <div v-if="item.id==4">
          <div style="float:right;margin-right:20px">
             <el-button type="primary" icon="el-icon-s-data" @click="dataanalysis"></el-button>
            <el-button type="primary" icon="el-icon-search" @click="consumptionment"></el-button>
            <el-button type="primary" icon="el-icon-document" @click="handleseach"></el-button>
          </div>
          <el-table :data="consumptiontableData" style="width: 100%">
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="type" label="类型"></el-table-column>
            <el-table-column label="金额">
              <el-table-column prop="setbefore" label="变动前"></el-table-column>
              <el-table-column prop="setd" label="变更"></el-table-column>
              <el-table-column prop="setafter" label="变更后"></el-table-column>
            </el-table-column>
            <el-table-column prop="wechatpay" label="微信支付"></el-table-column>
            <el-table-column prop="public" label="大众点评"></el-table-column>
            <el-table-column prop="meal" label="套餐"></el-table-column>
            <el-table-column prop="shop" label="门店"></el-table-column>
            <el-table-column prop="status" label="订单状态">
              <template slot-scope="scope" style="display:flex;align-items: center;">
                <img
                  src="../../assets/img/dui.png"
                  v-if="scope.row.status"
                  style="width:14px;height:14px;margin-right:6px;"
                  alt
                />
                <span>{{scope.row.statustext}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="user" label="用户"></el-table-column>
          </el-table>
        </div>
        <div v-if="item.id==5">
          <div style="float:right;margin-right:20px">
            <el-button type="primary" icon="el-icon-s-data" @click="rechargeanalysis"></el-button>
            <el-button type="primary" icon="el-icon-search" @click="rechargesearch"></el-button>
            <el-button type="primary" icon="el-icon-document" @click="handleseach"></el-button>
          </div>
          <el-table :data="rechargetableData" border style="width: 100%">
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="type" label="类型"></el-table-column>
            <el-table-column prop="rechargeprice" label="充值金额"></el-table-column>
            <el-table-column prop="giftprice" label="赠送金额"></el-table-column>
            <el-table-column prop="payprice" label="支付金额"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column prop="validuntil" label="有效期至"></el-table-column>
            <el-table-column prop="shop" label="门店"></el-table-column>
            <el-table-column prop="status" label="订单状态">
              <template slot-scope="scope" style="display:flex;align-items: center;">
                <img
                  src="../../assets/img/dui.png"
                  v-if="scope.row.status"
                  style="width:14px;height:14px;margin-right:6px;"
                  alt
                />
                <span>{{scope.row.statustext}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="user" label="用户"></el-table-column>
          </el-table>
        </div>
        <div v-if="item.id==6">
          <div style="float:right;margin-right:20px">
            <el-button type="primary" icon="el-icon-search" @click="mealsearch"></el-button>
            <el-button type="primary" icon="el-icon-document" @click="handleseach"></el-button>
          </div>
          <el-table :data="mealtableData" border style="width: 100%">
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="type" label="类型"></el-table-column>
            <el-table-column prop="meal" label="套餐"></el-table-column>
            <el-table-column prop="shop" label="可用门店"></el-table-column>
            <el-table-column prop="mealcont" label="套餐内容"></el-table-column>
            <el-table-column prop="details" label="使用详情"></el-table-column>
            <el-table-column prop="user" label="用户"></el-table-column>
          </el-table>
        </div>
        <div v-if="item.id==7">
          <el-table :data="noticetableData" style="width: 100%">
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="tips" label="消息"></el-table-column>
            <el-table-column prop="time" label="时间"></el-table-column>
          </el-table>
        </div>
        <div v-if="item.id==8">
          <div style="float:right;margin-right:20px">
            <el-button type="primary" icon="el-icon-search" @click="guisearch"></el-button>
          </div>
          <el-table :data="lockertableData" border style="width: 100%">
            <el-table-column prop="date" label="开柜时间"></el-table-column>
            <el-table-column prop="shop" label="门店"></el-table-column>
            <el-table-column prop="user" label="用户"></el-table-column>
            <el-table-column prop="lockerid" label="货柜编号"></el-table-column>
            <el-table-column prop="deviceid" label="设备ID"></el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="数据分析" :visible.sync="analysispopup" width="50%">
      <el-table :data="analysisData" style="width: 100%;margin-bottom:20px">
        <el-table-column prop="shop" label="门店"></el-table-column>
        <el-table-column prop="Preferential " label="优惠消耗"></el-table-column>
        <el-table-column prop="wechatrevenue" label="微信收入"></el-table-column>
      </el-table>
      <div style="text-align:right">
        <el-button type="primary" @click="analysispopup=false">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="签退" :visible.sync="logonpopup" width="50%">
      <el-form ref="logondata" :model="logondata">
        <el-form-item label="日期" prop="date" label-width="120px">
          <el-time-picker
            v-model="time1"
            :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
    }"
            placeholder="选择时间"
          ></el-time-picker>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button type="primary" @click="submitFormlogondata()">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="数据搜索" :visible.sync="searchpopup" width="40%">
      <el-form ref="datasearch" :model="datasearch" :rules="rules">
        <el-form-item label="门店" prop="shop" label-width="120px">
          <el-select v-model="datasearch.shop" style="width:100%" multiple placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="date" label-width="120px">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="订单状态" prop="status" label-width="120px">
          <el-select v-model="datasearch.status" style="width:100%" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户手机" prop="phone" label-width="120px">
          <el-input v-model="datasearch.phone" placeholder="请输入用户手机"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button @click="resetForm()">重置</el-button>
          <el-button type="primary" @click="submitFormdatasearch('datasearch')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="搜索数据" :visible.sync="controlsearchpopup" width="40%">
      <el-form ref="controldata" :model="controldata" :rules="rules">
        <el-form-item label="门店" prop="shop" label-width="120px">
          <el-select v-model="controldata.shop" style="width:100%" multiple placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="date" label-width="120px">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="客户手机" prop="phone" label-width="120px">
          <el-input v-model="controldata.phone" placeholder="请输入用户手机"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button @click="resetForm()">重置</el-button>
          <el-button type="primary" @click="submitFormcontrolsearchpopup('controldata')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="搜索数据" :visible.sync="operationsearchpopup" width="40%">
      <el-form ref="operationdata" :model="operationdata">
        <el-form-item label="用户" prop="user" label-width="120px">
          <el-select v-model="operationdata.user" style="width:100%" placeholder="请选择">
            <el-option
              v-for="item in operationoptions1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="date" label-width="120px">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button @click="resetForm()">重置</el-button>
          <el-button type="primary" @click="submitFormoperationsearchpopup('operationdata')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


    <el-dialog title="数据搜索" :visible.sync="consumptionpopup" width="40%">
      <el-form ref="consumptiondata" :model="consumptiondata">
        <el-form-item label="交易类型" prop="type" label-width="120px">
          <el-select v-model="consumptiondata.type" style="width:100%" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="门店" prop="shop" label-width="120px">
          <el-select v-model="consumptiondata.shop" style="width:100%" multiple placeholder="请选择">
            <el-option
              v-for="item in optionshop"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="date" label-width="120px">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="交易状态" prop="status" label-width="120px">
          <el-select v-model="consumptiondata.status" style="width:100%" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户手机" prop="phone" label-width="120px">
          <el-input v-model="consumptiondata.phone" placeholder="请输入用户手机"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button @click="resetForm()">重置</el-button>
          <el-button type="primary" @click="submitFormconsumptiondata('consumptiondata')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


<el-dialog title="数据搜索" :visible.sync="rechargepopup" width="40%">
      <el-form ref="rechargedata" :model="rechargedata">
        <el-form-item label="支付方式" prop="paytype" label-width="120px">
          <el-select v-model="rechargedata.paytype" style="width:100%" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="门店" prop="shop" label-width="120px">
          <el-select v-model="rechargedata.shop" style="width:100%" multiple placeholder="请选择">
            <el-option
              v-for="item in optionshop"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="date" label-width="120px">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="交易状态" prop="status" label-width="120px">
          <el-select v-model="rechargedata.status" style="width:100%" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户手机" prop="phone" label-width="120px">
          <el-input v-model="rechargedata.phone" placeholder="请输入用户手机"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button @click="resetForm()">重置</el-button>
          <el-button type="primary" @click="submitFormrechargedata('rechargedata')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

<el-dialog title="数据分析" :visible.sync="rechargeanalysispopup" width="50%">
      <el-table :data="rechargeanalysisData" style="width: 100%;margin-bottom:20px">
        <el-table-column prop="shop" label="门店"></el-table-column>
        <el-table-column prop="houconsumption " label="后台消费"></el-table-column>
        <el-table-column prop="commentincome" label="点评收入"></el-table-column>
        <el-table-column prop="wechatrevenue" label="微信收入"></el-table-column>
      </el-table>
      <div style="text-align:right">
        <el-button type="primary" @click="rechargeanalysispopup=false">确定</el-button>
      </div>
    </el-dialog>

<el-dialog title="数据搜索" :visible.sync="mealpopup" width="40%">
      <el-form ref="mealdata" :model="mealdata">
        <el-form-item label="套餐" prop="meal" label-width="120px">
          <el-select v-model="mealdata.meal" style="width:100%" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="date" label-width="120px">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
          <el-form-item label="有效日期" prop="date" label-width="120px">
          <el-date-picker
            v-model="value2"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="客户手机" prop="phone" label-width="120px">
          <el-input v-model="mealdata.phone" placeholder="请输入用户手机"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button @click="resetForm()">重置</el-button>
          <el-button type="primary" @click="submitFormmealdata('mealdata')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


<el-dialog title="搜索数据" :visible.sync="guipopup" width="40%">
      <el-form ref="guidata" :model="guidata">
        <el-form-item label="门店" prop="shop" label-width="120px">
          <el-select v-model="guidata.shop" style="width:100%" multiple placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="date" label-width="120px">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="客户手机" prop="phone" label-width="120px">
          <el-input v-model="guidata.phone" placeholder="请输入用户手机"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button @click="resetForm()">重置</el-button>
          <el-button type="primary" @click="submitFormguipopup('guidata')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="延长订单" :visible.sync="extendedpopup" width="50%">
      <el-form ref="extendeddata" :model="extendeddata" :rules="rules">
        <el-form-item label="座位" prop="seat" label-width="180px">
          <span>01</span>
        </el-form-item>
        <el-form-item label="预约日期" prop="date" label-width="180px">
          <span>{{extendeddata.date}}</span>
        </el-form-item>
        <el-form-item label="时间" prop="time" label-width="180px">
          <span>{{extendeddata.time}}</span>
        </el-form-item>
        <el-form-item label="延长" prop="extend" label-width="180px">
          <el-input-number
            v-model="extendeddata.extend"
            @change="handleChange"
            :min="1"
            :max="10"
            label
          ></el-input-number>
        </el-form-item>
        <el-form-item label="预约用户" prop="user" label-width="180px">
          <span>{{extendeddata.user}}</span>
        </el-form-item>
        <div
          style="width:80%;background:#333333;height:1px;margin-left: 50%;transform: translateX(-50%)"
        ></div>
        <div
          style="text-align: right;width:80%;margin-top:16px;margin-left: 50%;transform: translateX(-50%);display:flex;justify-content: flex-end;"
        >修改后费用 239 - 239 =0 还需要支付0元</div>
        <el-form-item
          style="text-align: left;width:80%;margin-left: 50%;transform: translateX(-50%);margin-top:50px"
        >
          <el-button type="primary" @click="submitFormextendeddata('extendeddata')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="提前结束" :visible.sync="stoppopup" width="50%">
      <el-form ref="stopdata" :model="stopdata" :rules="rules">
        <el-form-item label="座位" prop="seat" label-width="180px">
          <span>01</span>
        </el-form-item>
        <el-form-item label="预约日期" prop="date" label-width="180px">
          <span>{{stopdata.date}}</span>
        </el-form-item>
        <el-form-item label="时间" prop="time" label-width="180px">
          <span>{{stopdata.time}}</span>
        </el-form-item>
        <el-form-item label="预约用户" prop="user" label-width="180px">
          <span>{{stopdata.user}}</span>
        </el-form-item>
        <div
          style="width:80%;background:#333333;height:1px;margin-left: 50%;transform: translateX(-50%)"
        ></div>
        <div
          style="text-align: right;width:80%;margin-top:16px;margin-left: 50%;transform: translateX(-50%);display:flex;justify-content: flex-end;"
        >修改后费用 12.00 还需要支付7.50元</div>
        <el-form-item
          style="text-align: left;width:80%;margin-left: 50%;transform: translateX(-50%);margin-top:50px"
        >
          <el-button type="primary" @click="submitFormstopdata('stopdata')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"])
  },
  components: {
    Map
  },
  data() {
    return {
      rules: {
        phone: [{ required: true, message: "请输入手机号", trigger: "change" }]
      },
      datasearch: {
        shop: []
      },
      controldata: {
        shop: []
      },
      guidata:{
        shop: []
      },
      operationdata:{
        user:[]
      },
      consumptiondata:{
        shop: []
      },
      rechargedata:{
        shop: []
      },
      analysisData: [{}],
      rechargeanalysisData: [{}],
      mealdata:{},
      value1: "",
      value2: "",
      time1: "",
      optionshop:[
         {
          value: "选项1",
          label: "中走大道店"
        },
        {
          value: "选项2",
          label: "小小长假啊"
        }
      ],
      operationoptions1: [
        {
          value: "选项1",
          label: "小明"
        },
        {
          value: "选项2",
          label: "小小长假啊"
        }
      ],
      options1: [
        {
          value: "选项1",
          label: "咖啡茶水"
        },
        {
          value: "选项2",
          label: "空气净化"
        },
        {
          value: "选项3",
          label: "微波炉"
        },
        {
          value: "选项4",
          label: "停车场"
        },
        {
          value: "选项5",
          label: "冰箱"
        },
        {
          value: "选项6",
          label: "空调"
        },
        {
          value: "选项7",
          label: "客服"
        }
      ],
      options2: [
        {
          value: "选项1",
          label: "已完成"
        },
        {
          value: "选项2",
          label: "未完成"
        },
        {
          value: "选项3",
          label: "已结束"
        }
      ],
      extendeddata: {
        seat: "01",
        date: "2021-12-30",
        extend: "1",
        user: "15857887854",
        time: "00:00—23:59"
      },
      stopdata: {
        seat: "01",
        date: "2021-12-30",
        user: "15857887854",
        time: "00:00—23:59"
      },
      extendedpopup: false,
      stoppopup: false,
      searchpopup: false,
      controlsearchpopup: false,
      consumptionpopup:false,
      rechargepopup:false,
      operationsearchpopup:false,
      analysispopup: false,
      rechargeanalysispopup:false,
      mealpopup:false,
      logonpopup: false,
      guipopup:false,
      tableData2: [],
      doortableData: [
        {
          time: "2021-12-30 14:44",
          seat: "莲花北店",
          user: "lucky",
          opendoor: "开锁成功",
          phone: "18589658569"
        },
        {
          time: "2021-12-30 14:44",
          seat: "莲花北店",
          user: "lucky",
          opendoor: "开锁成功",
          phone: "18589658569"
        },
        {
          time: "2021-12-30 14:44",
          seat: "莲花北店",
          user: "lucky",
          opendoor: "开锁成功",
          phone: "18589658569"
        },
        {
          time: "2021-12-30 14:44",
          seat: "莲花北店",
          user: "lucky",
          opendoor: "开锁成功",
          phone: "18589658569"
        },
        {
          time: "2021-12-30 14:44",
          seat: "莲花北店",
          user: "lucky",
          opendoor: "开锁成功",
          phone: "18589658569"
        },
        {
          time: "2021-12-30 14:44",
          seat: "莲花北店",
          user: "lucky",
          opendoor: "开锁成功",
          phone: "18589658569"
        },
        {
          time: "2021-12-30 14:44",
          seat: "莲花北店",
          user: "lucky",
          opendoor: "开锁成功",
          phone: "18589658569"
        }
      ],
      operationtableData: [
        {
          time: "2021-12-30 14:44",
          user: "lucky",
          state: "导出预约数据",
          ipaddress: "110.12.113.258"
        },
        {
          time: "2021-12-30 14:44",
          user: "lucky",
          state: "导出预约数据",
          ipaddress: "110.12.113.258"
        },
        {
          time: "2021-12-30 14:44",
          user: "lucky",
          state: "导出预约数据",
          ipaddress: "110.12.113.258"
        }
      ],
      consumptiontableData: [
        {
          date: "2016-05-03",
          type: "提前结算",
          setbefore: "50元",
          setd: "+35",
          setafter: "85元",
          wechatpay: "支付100元",
          public: "-",
          meal: "-",
          shop: "-",
          status: true,
          statustext: "交易成功",
          user: "lucyly"
        },
        {
          date: "2016-05-03",
          type: "提前结算",
          setbefore: "50元",
          setd: "+35",
          setafter: "85元",
          wechatpay: "支付100元",
          public: "-",
          statustext: "交易成功",
          meal: "-",
          shop: "-",
          status: true,
          user: "lucyly"
        },
        {
          date: "2016-05-03",
          type: "提前结算",
          setbefore: "50元",
          setd: "+35",
          setafter: "85元",
          statustext: "交易成功",
          wechatpay: "支付100元",
          public: "-",
          meal: "-",
          shop: "-",
          status: true,
          user: "lucyly"
        },
        {
          date: "2016-05-03",
          type: "提前结算",
          setbefore: "50元",
          setd: "+35",
          setafter: "85元",
          wechatpay: "支付100元",
          statustext: "交易成功",
          public: "-",
          meal: "-",
          shop: "-",
          status: true,
          user: "lucyly"
        }
      ],
      rechargetableData: [
        {
          date: "2016-05-03",
          type: "提前结算",
          rechargeprice: "50元",
          giftprice: "10元",
          payprice: "20元",
          remark: "暂无",
          validuntil: "2022-12-17",
          shop: "-",
          statustext: "交易成功",
          status: true,
          user: "lucyly"
        },
        {
          date: "2016-05-03",
          type: "提前结算",
          rechargeprice: "50元",
          giftprice: "10元",
          statustext: "交易成功",
          payprice: "20元",
          remark: "暂无",
          validuntil: "2022-12-17",
          shop: "-",
          status: true,
          user: "lucyly"
        },
        {
          date: "2016-05-03",
          type: "提前结算",
          statustext: "交易成功",
          rechargeprice: "50元",
          giftprice: "10元",
          payprice: "20元",
          remark: "暂无",
          validuntil: "2022-12-17",
          shop: "-",
          status: true,
          user: "lucyly"
        },
        {
          date: "2016-05-03",
          type: "提前结算",
          rechargeprice: "50元",
          giftprice: "10元",
          statustext: "交易成功",
          payprice: "20元",
          remark: "暂无",
          validuntil: "2022-12-17",
          shop: "-",
          status: true,
          user: "lucyly"
        }
      ],
      mealtableData: [
        {
          date: "2021-12-30",
          type: "期卡",
          meal: "周卡：7天连续不间断使用（通用）",
          shop: "莲花北店 龙华店 大剧院店 车公庙店",
          mealcont: "预约时段工作日：00:00—23:59节假日：00:00—23:59",
          details: "有效期开始：2021-12-25结束：2021-12-31",
          user: "微信用户(18845287452)"
        },
        {
          date: "2021-12-30",
          type: "期卡",
          meal: "周卡：7天连续不间断使用（通用）",
          shop: "莲花北店 龙华店 大剧院店 车公庙店",
          mealcont: "预约时段工作日：00:00—23:59节假日：00:00—23:59",
          details: "有效期开始：2021-12-25结束：2021-12-31",
          user: "微信用户(18845287452)"
        },
        {
          date: "2021-12-30",
          type: "期卡",
          meal: "周卡：7天连续不间断使用（通用）",
          shop: "莲花北店 龙华店 大剧院店 车公庙店",
          mealcont: "预约时段工作日：00:00—23:59节假日：00:00—23:59",
          details: "有效期开始：2021-12-25结束：2021-12-31",
          user: "微信用户(18845287452)"
        }
      ],
      noticetableData: [
        {
          name: "lucky",
          tips: "预约成功消息通知",
          time: "2021-12-27 16:36"
        },
        {
          name: "lucky",
          tips: "预约成功消息通知",
          time: "2021-12-27 16:36"
        },
        {
          name: "lucky",
          tips: "预约成功消息通知",
          time: "2021-12-27 16:36"
        },
        {
          name: "lucky",
          tips: "预约成功消息通知",
          time: "2021-12-27 16:36"
        }
      ],
      lockertableData: [
        {
          date: "2021-12-30",
          shop: "莲花北店",
          user: "微信用户(18845287452)",
          lockerid: "22",
          deviceid: "1"
        },
        {
          date: "2021-12-30",
          shop: "莲花北店",
          user: "微信用户(18845287452)",
          lockerid: "22",
          deviceid: "1"
        },
        {
          date: "2021-12-30",
          shop: "莲花北店",
          user: "微信用户(18845287452)",
          lockerid: "22",
          deviceid: "1"
        }
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          shop: "莲花店",
          seat: "01",
          time: "2020-02-22",
          status: true,
          user: "lucky",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          shop: "莲花店",
          seat: "01",
          time: "2020-02-22",
          status: true,
          user: "lucky",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          shop: "莲花店",
          seat: "01",
          time: "2020-02-22",
          status: true,
          user: "lucky",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          shop: "莲花店",
          seat: "01",
          time: "2020-02-22",
          status: true,
          user: "lucky",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      activeName: "1",
      itemdata: [
        {
          id: "1",
          text: "预约记录"
        },
        {
          id: "2",
          text: "门禁记录"
        },
        {
          id: "3",
          text: "操作记录"
        },
        {
          id: "4",
          text: "消费记录"
        },
        {
          id: "5",
          text: "充值记录"
        },
        {
          id: "6",
          text: "套餐记录"
        },
        {
          id: "7",
          text: "通知记录"
        },
        {
          id: "8",
          text: "储物柜记录"
        }
      ],
      current: 0,
      options: [
        {
          id: 2,
          text: "座位预约"
        },
        {
          id: 3,
          text: "会议室"
        }
      ]
    };
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    chaged(e) {
      this.current = e;
    },
    extendedorder(index, data) {
      this.extendedpopup = true;
    },
    beforestop(index, data) {
      this.stoppopup = true;
    },
    bindstall() {},
    logon() {
      this.logonpopup = true;
    },
    submitFormextendeddata() {
      this.extendedpopup = false;
    },
    submitFormdatasearch(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.searchpopup = false;
        } else {
          return false;
        }
      });
    },
    submitFormcontrolsearchpopup(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.consumptionpopup = false;
        } else {
          return false;
        }
      });
    },
    submitFormguipopup(formName) {
      this.guipopup = false;
    },
    submitFormoperationsearchpopup(){
      this.operationsearchpopup = false;
    },
    submitFormconsumptiondata(){
      this.operationsearchpopup = false;
    },
    submitFormrechargedata(){
      this.rechargepopup = false;
    },
    submitFormmealdata(){
      this.mealpopup = false;
    },
    submitFormlogondata() {
      this.logonpopup = false;
    },
    submitFormstopdata() {
      this.stoppopup = false;
    },
    guisearch(){
      this.guipopup=true
    },
    dataanalysis() {
      this.analysispopup = true;
    },
    mealsearch(){
      this.mealpopup = true;
    },
    consumptionment(){
      this.consumptionpopup = true;
    },
    rechargesearch(){
      this.rechargepopup = true
    },
    rechargeanalysis(){
      this.rechargeanalysispopup=true
    },
    controlhandleseach() {
      this.controlsearchpopup = true;
    },
    appointmentseach() {
      this.searchpopup = true;
    },
    operationsearch(){
      this.operationsearchpopup=true
    }
  }
};
</script>

<style lang="scss" scoped>
.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
.el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
.el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 20px;
}
.el-table .cell {
  display: flex !important;
  align-items: center !important;
}
.items {
  margin-left: 40px;
}
.line {
  text-align: center;
}
.box1 {
  margin-bottom: 24px;
}
.inpts {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 98%;
  color: #409eff;
  font-size: 12px;
  padding-left: 16px;
}
.contbox {
  width: 100%;
  height: auto;
  margin-top: 24px;
  margin-left: 20px;
}
.tit1 {
  border-bottom: 1px solid #f0f2f5;
  width: 100%;
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.tx1 {
  margin-left: 10px;
  margin-right: 16px;
  color: #010101;
  font-size: 16px;
}
.el-table td,
.el-table th {
  padding-left: 10px;
}
.tx2 {
  color: #afafaf;
  font-size: 12px;
}
.el-tabs__header {
  margin-bottom: 0px;
}
.section10 {
  z-index: 103;
  height: 40px;
  border: 1px solid rgba(240, 242, 245, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mod2 {
  width: 569px;
  height: 40px;
  display: flex;
  cursor: pointer;
}
.optionitems {
  width: 98px;
  height: 40px;
  background: #ffffff;
  border-right: 1px solid #f0f2f5;
  border-bottom: 1px solid #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
  font-size: 14px;
}
.optionitems:nth-child(1) {
  border-left: none;
}
.optionitem {
  color: rgba(51, 51, 51, 1);
  width: 98px;
  height: 40px;
  display: flex;
  border-right: 1px solid #f0f2f5;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
</style>
